<?php
use yii\helpers\Json;
use yii\helpers\Url;
use app\components\JSSDK;

$this->title = $cruise->name;

$logo_path = [
        3=>'/img/logo2/3.png',
        4=>'/img/logo2/4.png',
        5=>'/img/logo2/5.png',
        6=>'/img/logo2/6.png',
        7=>'/img/logo2/7.png',
        8=>'/img/logo2/8.png',
        9=>'/img/logo2/9.png',
        10=>'/img/logo2/10.png',
]; 
$jssdk = new JSSDK("wxdf104a667847eb11", "1e1b098e7c4f442d94fe3499463238f2");
$signPackage = $jssdk->GetSignPackage();
?>
<script type="text/javascript" src="/js/iconfont.js"></script>
<style type="text/css">
	.mui-segmented-control .mui-control-item{color: #999;}
	.mui-segmented-control{border: 0px;border-radius: 0px;}
	.table_info tbody td{border-bottom: 1px solid #ddd;padding: 10px;}
	.mui-col-xs-15{width:20% }
	.icon1{color:#FFF;font-size:20px;line-height: 40px;}
	.icon2{font-size: 1em;color:#666;}
	.info p{margin-bottom: 0px !important;margin-top:5px;color: #666;font-size: 12px;}
	.theme1_info_c_r p{font-size:0.75em;color: #000;margin-bottom: 5px;}
	.mui-h6, h6{font-size:14px;color: #000;margin-bottom: 10px;padding: 2px;line-height: 11px;}
	.mui-table-view-cell:after{left:0} 
	.mui-table-view{background-color:#efeff4;}
	.mui-table-view-cell{background-color: #FFF;/*margin-top: 10px;*/}
	.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{background-color: #CCF4FC;color: #000;}
	.grid-sizer,.grid-item{width: 50%}
	.img-num{color: #FFF;background-color: rgba(10, 10, 10,0.666667);bottom:30px;position: absolute;right:0px;width: 60px;line-height: 30px;text-align: center;border-top-left-radius:1em;border-bottom-left-radius:1em;}
	.mui-bar-transparent{top:0;background-color:rgba(166,100,166,0);-webkit-box-shadow:none;box-shadow:none}
	.color-w{color: #FFF !important;}
	.color-b{color: #333 !important;}
	.cruise-info{border:1px solid #ddd;border-radius: 6px;}
	.cruise-info .tab1{border-bottom: 1px solid #ddd}

	.cruise-info p{color: #333 !important;font-size: 0.8rem !important;margin: 0;}

	.cruise-info .ship{padding: 10px;padding-left: 15px;}
	/******字体icon*****/
	.icon3{font-size: 14px;color:#a664a6;}

    .color_1 {color:#999;}

    .mui-segmented-control .mui-control-item.mui-active{background-color:rgb(255, 255, 255);color: #333;border-bottom:2px solid #a664a6;}
    .mui-btn-primary{border: 1px solid #E5CB7E;
    background-color: #E5CB7E;}
    .mui-btn-outlined{background-color:transparent}
    .mui-btn-outlined.mui-btn-primary{ color:#E5CB7E;}
    .col_333{color: #333 !important}
    .col_666{color: #666 !important}
    .mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{color: rgb(41, 167, 226);}
    .mui-table-view:before{background-color:#FFF;}


    .icon {
	   width: 1.2rem; height: 1.2rem;
	   vertical-align: -0.2em;
	   fill: currentColor;
	   overflow: hidden;
	}

	#arc{position: absolute;background-color: #FFF;height: 72px;width: 72px;bottom: -50px;left: 14px;border-radius: 36px}
	
	.panel_wrap{padding: 5px 5px 0 5px;}
	.panel-box{background-color: #fff;border-radius: 4px;box-shadow: 0 1px 0 rgba(219,213,213,.75);overflow: hidden;}

	.panel-wb{background-color: #fff;border-radius: 4px;box-shadow: 0 1px 0 rgba(219,213,213,.75);margin: 0 5px 5px 5px;}
	.panel-wb .box-img{background-color: #FFF;border-radius: 4px;}
	.panel-wb .box-img .img-src{width:60px;vertical-align:middle;white-space:normal;text-overflow:ellipsis;position: relative;left:16px;top: -18px;z-index:2;}
	.panel-wb .box-title{position: relative;margin-left:56px;bottom:48px;margin-bottom:-40px;}
	.panel-wb .info{background-color: #FFF;padding: 10px;border-radius: 4px;}

	.panel-box-cell{margin-bottom: 10px;}
	.cell-title{margin-bottom:5px;padding-bottom:5px;border-bottom: 1px solid #ddd}

	.tips{padding: 40px 0 40px 0;}

	.mui-bar{height: 64px}
	.mui-bar .mui-icon{padding-top: 20px;padding-bottom: 20px;}
	.mui-title{line-height: 64px;}
</style>


<?= yii\web\View::registerCssFile("/css/front/cruise.css",['depends' => 'app\assets\MuiAsset']) ?>
<?= yii\web\View::registerCssFile("/mui/css/previewimage.css",['depends' => 'app\assets\MuiAsset']) ?>


<header id="header" class="mui-bar mui-bar-transparent">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #FFF;"></a>
		<h1 class="mui-title follow" style="color: #FFF;"><?= $cruise->name ?></h1>
		<span class="mui-pull-right follow" style="font-size: 0.6rem;color: #FFFFFF;margin-right: 15px;line-height: 64px;"><i class="iconfont follow" style="-webkit-text-stroke-width:0px;font-size: 50px;">&#xe6bd;</i></span>
</header>

<div class="mui-content">
		<div id="slider" class="mui-slider" >

			<div class="mui-slider-group mui-slider-loop" style="line-height: 0;">
				
				 <?php $img_num = count($img)-1;?>
			     <?php foreach($img as $sk=>$sv){ ?>
			     	<?php if($sk==0 || $sk == $img_num){?>
			     		<div class="mui-slider-item mui-slider-item-duplicate"><img src="<?=\Yii::$app->params['qiniu_path'].$sv->path.'?imageView2/1/w/640/h/420'?>" /></div>
			     	<?php }?>
			     	   <div class="mui-slider-item"><img src="<?=\Yii::$app->params['qiniu_path'].$sv->path.'?imageView2/1/w/640/h/420';?>" data-preview-src="<?=\Yii::$app->params['qiniu_path'].$sv->path.'?imageView2/1/w/1280/h/960'?>" data-preview-group="1" /></div>
			     <?php }?>
			
			</div>
			<div class="img-num"><span class="cg-num">1</span>/<span><?=$img_num+1?></span></div>
			<div id="arc"></div>
		</div>
		
		<div class="panel-wb">

				<div class="box-img">
					<img  class="img-src" src="<?=isset($logo_path[$cruise->supplier_id])?$logo_path[$cruise->supplier_id]:'/img/logo2/400.png';?>">
		   		</div>
		   		<div class="box-title mui-ellipsis">
		   			 <span  style="margin-left: 2rem;font-size: 1.2rem;"><?= $cruise->name ?>
		   			 <span style="margin-left: 1rem;font-size: 1rem;"><?=$cruise->en_name?></span>
		   			 </span>
				</div>
				<div class="info">
					<div class="cruise-info">
						<div class="mui-row tab1">
							<div class="mui-col-xs-6 ship" style="border-right:1px solid #ddd">
								<p>
								<svg class="icon" aria-hidden="true">
								  <use xlink:href="#icon-zaizhong1"></use>
								</svg>
								<span class="color_1">吨位：</span>
								<?=\yii::$app->formatter->asDecimal($cruise->weight)?>吨
								</p>
							</div>
							<div class="mui-col-xs-6 ship">
								<p>
								<svg class="icon" aria-hidden="true">
								  <use xlink:href="#icon-zaike"></use>
								</svg>
								<span class="color_1">载客：</span>
								<?=\yii::$app->formatter->asDecimal($cruise->num);?>人
								</p>
							</div>
							
						</div>	
						<div class="mui-row tab1">
							<div class="mui-col-xs-6 ship" style="border-right:1px solid #ddd">
								<p>
								<svg class="icon" aria-hidden="true">
								  <use xlink:href="#icon-changkuan"></use>
								</svg>
								<span class="color_1">长宽：</span>
								<?=$cruise->length;?> x <?=$cruise->width;?>米
								</p>
							</div>
							<div class="mui-col-xs-6 ship">
								<p>
								<svg class="icon" aria-hidden="true">
								  <use xlink:href="#icon-kefang1"></use>
								</svg>
								<span class="color_1">客房：</span>
								<?=\yii::$app->formatter->asDecimal($cruise->room);?>间
								</p>
							</div>
						</div>	
						<div class="mui-row tab2">
							<div class="mui-col-xs-6 ship" style="border-right:1px solid #ddd">
								<p>
								<svg class="icon" aria-hidden="true">
								  <use xlink:href="#icon-louceng2"></use>
								</svg>
								<span class="color_1">楼层：</span>
								<?=\yii::$app->formatter->asDecimal($cruise->ceil);?>层
								</p>
							</div>
							<div class="mui-col-xs-6 ship">
								<p>
								<svg class="icon" aria-hidden="true">
								  <use xlink:href="#icon-rili1"></use>
								</svg>
								<?php if(!empty($cruise->first)){?>
								    <span class="color_1">首航：</span>
								    <?=$cruise->first;?>年
								<?php }else{?>
								    <span class="color_1">翻修：</span>
								    <?=$cruise->renovation;?>年
								<?php };?>
								</p>
							</div>
						</div>
					</div>
				</div>	

		</div>
		<div class="panel_wrap">
			<div class="panel-box">
				<div class="mui-slider mui-slider-list" style="background-color: #FFF;">
					<div class="mui-slider-indicator mui-segmented-control">
						<div class="mui-row">
							<div class="mui-col-xs-15">
								<a class="mui-control-item mui-active" href="#room_1">
									舱房
								</a>
							</div>
							<div class="mui-col-xs-15">
								<a class="mui-control-item" href="#restaurant_2">
									餐饮
								</a>
							</div>
							<div class="mui-col-xs-15">
								<a class="mui-control-item" href="#recreation_3">
									娱乐
								</a>
							</div>
							<div class="mui-col-xs-15">
								<a class="mui-control-item" href="#item6">
									航线
								</a>
							</div>
							<div class="mui-col-xs-15">
								<a class="mui-control-item" id="service" href="#service_5">
									服务
								</a>
							</div>
						</div>
					</div>
			 	</div>
		 	</div>
		 	<div class="mui-slider-group" style="margin-top: 10px;margin-bottom: 10px;">
		 			<!-- room start -->
					<div id="room_1" class="mui-slider-item mui-control-content mui-active">
						
							<?= $this->render('_room', ['in_room'=>$in_room,'sea_room'=>$sea_room,'bal_room'=>$bal_room,'sui_room'=>$sui_room,'high_room'=>$high_room,'other_room'=>$other_room,'in_first'=>$in_first,'sea_first'=>$sea_first,'bal_first'=>$bal_first,'sui_first'=>$sui_first,'other_first'=>$other_first,'high_first'=>$high_first]) ?>

					</div>
					<!--end-->

					<!-- restaurant_2 start -->
					<div id="restaurant_2" class="mui-slider-item mui-control-content">
						<ul class="mui-table-view">
							<?php if(!empty($restaurant)){?>
								<?php foreach($restaurant as $v){?>
								<div class="panel-box panel-box-cell">
								<li class="mui-table-view-cell ">
										<div class="cell-title">
											<span class="tag-f"><?=$v->name?></span>
										</div>
										<div class="mui-row">
										<p class="mui-col-xs-4 col_333">消费:<?=\yii::$app->params['spend'][$v->spend]?></p><p class="mui-col-xs-5 col_333">容纳人数:<?=$v->num?></p><p class="mui-col-xs-3 col_333">楼层:<?=$v->ceil?>层</p>
										</div>
										<p><?=$v->desc?></p>
										<div class="mui-row">
											<div class="mui-col-xs-4 theme2_info_c_l">
												<?php if(!empty($v->image)){?>
												<img src="<?=\Yii::$app->params['qiniu_path'].$v->image->path.'?imageView2/1/w/180/h/180'?>" 
													data-preview-src="<?=\Yii::$app->params['qiniu_path'].$v->image->path.'?imageView2/1/w/640/h/640'?>" data-preview-group="3" style="max-width: 100%;width: 70px;height: 70px;"/>
												<?php }else{?>
												<img src="http://cruiseimg.lmeeting.com/default.jpg?imageView2/1/w/70/h/70"  data-preview-src="http://cruiseimg.lmeeting.com/default.jpg?imageView2/1/w/70/h/70" data-preview-group="3" style="max-width: 100%;width: 70px;height: 70px;" />
												<?php };?>	
											</div>
											
										</div>	
								</li>
								</div>
								<?php };?>	
								<?php }else{?>
									<div class="panel-box panel-box-cell tips">
										<li class="mui-table-view-cell">
											<p style="color: #333;text-align: center;">暂无餐饮项目</p>
										</li>
									</div>
								<?php };?>		
						</ul>
					</div>
					<!--end-->

					<!--recreation_3 start-->
					<div id="recreation_3" class="mui-slider-item mui-control-content">
						<ul class="mui-table-view">
							<?php if(!empty($recreation)){?>
								<?php foreach($recreation as $v){?>
								<div class="panel-box panel-box-cell">
									<li class="mui-table-view-cell ">
										<div class="cell-title">
											<span class="tag-f"><?=$v->name?></span>
										</div>
										<div class="mui-row">
										<p class="mui-col-xs-6 col_333">消费:<?=\yii::$app->params['spend'][$v->spend]?></p><p class="mui-col-xs-6 col_333">楼层:<?=$v->ceil?>层</p>
										</div>
										<p><?=$v->desc?></p>
										<div class="mui-row">
											<div class="mui-col-xs-4 theme2_info_c_l">
											<?php if(!empty($v->image)){?>
												<img src="<?=\Yii::$app->params['qiniu_path'].$v->image->path.'?imageView2/1/w/180/h/180'?>" data-preview-src="<?=\Yii::$app->params['qiniu_path'].$v->image->path.'?imageView2/1/w/640/h/640'?>" data-preview-group="4" style="max-width: 100%;width: 70px;height: 70px;"/>
											<?php }else{?>
												<img src="http://cruiseimg.lmeeting.com/default.jpg?imageView2/1/w/70/h/70"  data-preview-src="http://cruiseimg.lmeeting.com/default.jpg?imageView2/1/w/70/h/70" data-preview-group="4" style="max-width: 100%;width: 70px;height: 70px;" />
											<?php };?>		
											</div>
									
										</div>	
									</li>
									</div>
									<?php };?>	

									<?php }else{?>
									<div class="panel-box panel-box-cell tips">
										<li class="mui-table-view-cell">
											<p style="color: #333;text-align: center;">暂无娱乐项目</p>
										</li>
									</div>
									<?php };?>	
							</ul>
					</div>
					<!--end-->

					<div id="item6" class="mui-slider-item mui-control-content">
								<ul class="mui-table-view theme4_ul">
									<?php if(!empty($lines)){?>
										<?php foreach($lines as $v){?>
										<div class="panel-box panel-box-cell">
										<li class="mui-table-view-cell mui-media">
											<a data-link="as" href="<?=Url::toRoute(['lines','id'=>$v['id']])?>">
												<img class="mui-media-object mui-pull-left img-left" src="<?=\Yii::$app->params['qiniu_path'].$v['image']['path'].'?imageView2/1/w/180/h/180'?>" style="max-width:64px;line-height: 64px;height: 64px;">
												<div class="mui-media-body">
													<div class="mui-row color-b">
														<div class="mui-col-xs-12 col_333" style="white-space:normal;font-size: 17px;">
														<?=$v['name']?>
														</div>
													</div>
					               
					                          	  <p style="margin-top:5px;margin-bottom: 5px;color: #666">
					                                <i class="iconfont icon3">&#xe668;</i>&nbsp;<?=\yii::$app->formatter->asDate($v['go_time']);?> / <?=yii::$app->params['city'][$v['from_city']]?>出发
					                            	</p>
					                            	<p style="margin-bottom: 5px;color: #666">¥
					                            	  <span  style="font-size: 18px;color: #f60">
					                                    <?=yii::$app->formatter->asDecimal(floor($v->minPrice))?><span style="font-size: 12px;vertical-align:2px;color: #666;">起/人</span>
					                             	</span>
					                            	</p>
					                            </div>							
											</a>
										</li>
										</div>	
										<?php };?>

									<?php }else{?>
									<div class="panel-box panel-box-cell tips">
										<li class="mui-table-view-cell">
											<p style="color: #333;text-align: center;">邮轮暂无航线</p>
										</li>
									</div>
									<?php };?>

									</ul>
						
					</div>

					<!--service_5 start-->
					<div id="service_5" class="mui-slider-item mui-control-content">
						<ul class="mui-table-view">
								<?php if(!empty($service)){?>
								<?php foreach($service as $v){?>
									<div class="panel-box panel-box-cell">
									<li class="mui-table-view-cell ">
									<div class="cell-title">
										<span class="tag-f"><?=$v->name?></span>
									</div>
									<div class="mui-row">
									<p class="mui-col-xs-6 col_333">消费：<?=\yii::$app->params['spend'][$v->spend]?></p>
									<?php if(!empty($v->ceil)){?>
									<p class="mui-col-xs-6 col_333">具体位置：<?=$v->ceil?>层</p>
									<?php }?>
									</div>
									<p><?=$v->desc?></p>
									<div class="mui-row">
										<div class="mui-col-xs-4 theme2_info_c_l">
										<?php if(!empty($v->image)){?>	
											<img src="<?=\Yii::$app->params['qiniu_path'].$v->image->path.'?imageView2/1/w/180/h/180'?>" data-preview-src="<?=\Yii::$app->params['qiniu_path'].$v->image->path.'?imageView2/1/w/640/h/640'?>" data-preview-group="5" style="max-width: 100%;width: 94%;margin-left:3%;margin-top: 3%"/>
										<?php }else{?>
											<img src="http://cruiseimg.lmeeting.com/default.jpg?imageView2/1/w/70/h/70"  data-preview-src="http://cruiseimg.lmeeting.com/default.jpg?imageView2/1/w/70/h/70" data-preview-group="5" style="max-width: 100%;width: 94%;margin-left:3%;margin-top: 3%"  />
										<?php };?>		
										</div>
									</div>						
								</li>
								</div>
								<?php };?>
								<?php }else{?>
									<div class="panel-box panel-box-cell tips">
										<li class="mui-table-view-cell">
											<p style="color: #333;text-align: center;">暂无服务介绍</p>
										</li>
									</div>
								<?php };?>	
						</ul>		
			 		</div>	
			 		<!--end-->	
        </div>
	   		
</div>

<?= yii\web\View::registerJsFile("/js/masonry/masonry.pkgd.min.js",['depends' => 'app\assets\MuiAsset']) ?>
<?= yii\web\View::registerJsFile("/js/imagesloaded/imagesloaded.pkgd.min.js",['depends' => 'app\assets\MuiAsset']) ?>
<?= yii\web\View::registerJsFile("/mui/js/mui.zoom.js",['depends' => 'app\assets\MuiAsset']) ?>
<?= yii\web\View::registerJsFile("/mui/js/mui.previewimage.js",['depends' => 'app\assets\MuiAsset']) ?>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<?= yii\web\View::registerJsFile("/js/layer_mobile/layer.js",['depends' => 'app\assets\MuiAsset']) ?>
<?php app\components\JsBlock::begin() ?>

<script type="text/javascript">

mui.init();

mui("body").on('tap','.follow',function(){
  
    layer.open({
    	type: 1,
    	content: '<img src="/img/qrcode.jpg">'
  	})

})

mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005,
	indicators: false, //是否显示滚动条
});

mui.previewImage();

//图片数字
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
	var num = event.detail.slideNumber;
	jQuery(".cg-num").text(num+1);
});

var btn = document.getElementById("service");
btn.addEventListener("tap",function () {
	$grid = $('.grid');
	$grid.imagesLoaded(function(){
	  	$grid.masonry({itemSelector: '.grid-item',});	
	});
	  
});


$('.theme_info_c').click(function(){
	var height = $(this)[0].scrollHeight;  
	var show_height = parseInt($(this).css('height'));  
	if(show_height < height){
		$(this).css('height',height);
		$(this).find(".icon_down").toggle();
		$(this).find(".icon_right").toggle();
	}else if(show_height == height){
		$(this).css('height',80);
		$(this).find(".icon_right").toggle();
		$(this).find(".icon_down").toggle();
	}	
});

$(".info_foot").click(function(){
	var show_height = parseInt($(this).prev(".info").children(".info_detail").css("height"));
	var height = $(this).prev(".info").children(".info_detail")[0].scrollHeight;
	if(show_height < height){
		$(this).prev(".info").children(".info_detail").css("height",height);
		$(this).text("收起");
		$('.grid').masonry({itemSelector: '.grid-item',});
	}else if(show_height == height){
		$(this).prev(".info").children(".info_detail").css("height",26);
		$(this).text("展开");
		$('.grid').masonry({itemSelector: '.grid-item',});
	}
});

mui('body').on('tap','a[data-in="s1"],a[data-sea="s1"],a[data-bal="s1"],a[data-sui="s1"],a[data-high="s1"],a[data-other="s1"]',function(){
   jQuery(this).trigger("click");
});

mui('body').on('tap','a[data-link="as"]',function(){document.location.href=this.href;});

                 

wx.config({
    debug: false,
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: '<?php echo $signPackage["timestamp"];?>',
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
      // 所有要调用的 API 都要加到这个列表中
      'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',

    ]
});


wx.ready(function(){
  var title = '<?=$cruise->name?>';
  var desc = '邮轮旅游平台-<?=$cruise->name?>';
  var link = '<?=sprintf("%s/front/default/cruise?id=%s",yii::$app->request->getHostInfo(),$cruise->id)?>';
  var imgUrl = '<?= empty($cruise->imageOne) ? '' : \Yii::$app->params['qiniu_path'].$cruise->imageOne->path.'?imageView2/1/w/640/h/480';?>';
  
  wx.onMenuShareTimeline({
    title:desc,
    desc:desc,
    link:link,
    imgUrl:imgUrl,
    
  });
  wx.onMenuShareQQ({
    title:title,
    desc:desc,
    link:link,
    imgUrl:imgUrl,
    
  });
  wx.onMenuShareWeibo({
    title:title,
    desc:desc,
    link:link,
    imgUrl:imgUrl, 
  });
  wx.onMenuShareAppMessage({
    title:title,
    desc:desc,
    link:link,
    imgUrl:imgUrl,
  });
  wx.onMenuShareQZone({
    title:title,
    desc:desc,
    link:link,
    imgUrl:imgUrl,
    
  });
      
  
});


</script>

<?php app\components\JsBlock::end() ?>
